<template>
  <div class="tea-card">
    <div class="top">
      <div class="top-left">
        <img class="icon-tea" src="../../static/svg/tea.svg" mode="">
        <div class="name">
          {{ data.Name }}
        </div>
      </div>
      <van-button class="view-detail" size="small" round @click="gotoDetail">
        <img src="../../static/svg/view.svg" mode="">
        <span>查看详情</span>
      </van-button>
    </div>
    <div scroll-x="true" class="scroll-x">
      <div class="summar-money">
        <div class="summar-li" v-for="item in data.detailList">
          <div class="money">
            <span class="value">{{ item.value || '0.00' }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
          <div class="label">{{ item.lable }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  query: {
    type: Object,
    default: {}
  }
})

const router = useRouter()

const gotoDetail = () => {
  // uni.navigateTo({
  //   url: `/home/detail?type=${props.data.type}&Name=${props.data.Name}&query=${JSON.stringify(props.query)}`
  // })
  router.push({
    path: '/home/detail',
    query: {
      type: props.data.type,
      Name: props.data.Name,
      query: JSON.stringify(props.query)
    }
  })
}

</script>

<style scoped lang="scss">
.tea-card {
  border: 1px solid #E9E2DC;
  margin-bottom: .625rem;
  padding: 1rem;
  border-radius: .5rem;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .625rem;
}

.top-left {
  display: flex;
  width: calc(100% - 5.375rem);

  .name {
    max-width: calc(100% - 1.25rem);
  }
}

.icon-tea {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: .125rem;
}

.scroll-x {
  width: 100%;
}

.summar-money {
  width: max-content;
  padding: 0px .625rem;
  display: flex;
  justify-content: space-between;
  min-width: 100%;
  box-sizing: border-box;

  .summar-li {
    width: max-content;

    &+.summar-li {
      padding-left: .625rem;
    }

    .money {
      width: max-content;
    }
  }

  .label {
    color: $base-text-color-grey;
    font-family: PingFang SC;
    font-size: .6875rem;
  }

  .value {
    font-size: 1.25rem;
  }

  .money-li {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  .money-li+.money-li {
    margin-left: .625rem;
  }

  .money-li:first-child {
    flex: 2;

    .value {
      font-size: 2.25rem;
    }
  }

}

:deep() {
  .view-detail {
    background-color: #F6F3F1;
    color: $base-color-primary;
    height: 1.6875rem;
    font-size: .6875rem;
    border: none;

    img {
      width: 1.1875rem;
      height: 1.1875rem;
    }

  }
}
</style>